<template>
    <div class="title-bar-box bg-primary" @click="$emit('back',$event)">
        <div class="left-back" v-if="showBack">
            <span class="iconfont iconfanhui"></span>
            返回
        </div>
        <slot></slot>
        <div class="right-menu">
            <slot name="right-menu"></slot>
        </div>
    </div>
</template>
<script>
export default{
    name:"title-bar",
    props:{
        showBack:{
            type:Boolean,
            default:()=>false
        }
    }
};
</script>

<style scoped lang="scss">
.title-bar-box{
    font-size: .18rem;
    color: white;
    font-weight: bold;
    height: .45rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .left-back{
        position: absolute;
        left: .1rem;
        font-size: .14rem;
        display: flex;
        align-items: center;
    }
    .right-menu{
        position: absolute;
        right: .1rem;
        display: flex;
        align-items: center;
        .iconfont{
            margin-left: .1rem;
            font-size: .2rem;
        }
    }
}
</style>